<template>
    <div style="display: flex">
        <el-container>
            <el-header>
                <div class="report_header" ref="headerHeight">
                    <div class="report_header_left"></div>
                    <div style="width: 300px;display: flex;align-items: center;margin-left: 10px;">
                        <svg-icon class="primary" :icon-class="$route.meta.icon" />
                        <span style="margin-left: 5px;" class="primary">{{$route.meta.title}}</span>
                    </div>
                    <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
                        <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px;justify-content: flex-end;">
                            <div class="report_header_date">
                                <el-date-picker style="width: 100%;" v-model="query.date" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                                </el-date-picker>
                            </div>
                            <div class="report_header_query">
                                <el-select v-model="query.status" clearable placeholder="请选择状态">
                                    <el-option label="待审核" :value="0"></el-option>
                                    <el-option label="已审核" :value="1"></el-option>
                                    <el-option label="已完成" :value="2"></el-option>
                                    <el-option label="已取消" :value="3"></el-option>
                                </el-select>
                            </div>
                        </div>
                        <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="queryClick">查询</el-button>
                        <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick" v-permission="['bargainBuy.add']">新增</el-button>
                    </div>
                </div>
            </el-header>
            <div class="pd10">
                <el-table :data="groupBuys" border stripe :height="curHeight" v-loadMore="[payLoads,'bargainBuy-list']" ref="table" style="width: 100%;">
                    <el-table-column type="index" width="50" align="center" fixed>
                    </el-table-column>

                    <el-table-column label="活动名称" align="left" prop="name" min-width="250">
                    </el-table-column>
                    <el-table-column label="活动类型" align="center">
                        <template slot-scope="{row}">{{ row.type |watchType}}</template>
                    </el-table-column>
                    <el-table-column label="砍杀价" align="center" prop="price">
                    </el-table-column>
                    <el-table-column label="邀请人数" align="center" prop="bargainNum">
                    </el-table-column>
                    <el-table-column align="center" prop="beginDate" label="开始时间" sortable="custom" width="170">
                        <template slot-scope="{row}">
                            <span style="margin-left: 10px">{{row.beginDate | datetimeFormatter}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="endDate" label="结束时间" sortable="custom" width="170">
                        <template slot-scope="{row}">
                            <span style="margin-left: 10px">{{row.endDate | datetimeFormatter}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="返还金币" align="center" prop="point" width="100">
                    </el-table-column>
                    <el-table-column label="功能" width="180" fixed="right" align="center">
                        <template slot-scope="scope">
                            <el-button v-permission="['bargainBuy.audit']" v-if="scope.row.status == 1" @click="unAuditClick(scope.row)" type="primary" size="mini">下架</el-button>
                            <el-button v-permission="['bargainBuy.audit']" v-if="scope.row.status == 0" @click="releaseProduct(scope.row)" type="primary" size="mini">上架</el-button>
                            <el-button @click="toDo(scope.row)" type="primary" size="mini">详情</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="80" align="center">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" v-permission="['bargainBuy.edit']" content="编辑" placement="top-start">
                                <a @click="editClick(scope.row)">
                                    <i style="color: #409EFF" class="el-icon-edit"></i>
                                </a>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" v-permission="['bargainBuy.del']" content="删除" placement="top-start">
                                <a style="margin-left: 10px" @click="deleteGroupBuy(scope.row)">
                                    <i style="color: #F56C6C" class="el-icon-delete"></i>
                                </a>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-footer class="el-footerBox">
                <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="loadGroupBuy"></pagination>
            </el-footer>

        </el-container>

    </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import loadMore from "@/utils/loadMore.js";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import { list, del, audit, unAudit } from "@/api/bargainBuy";
import { EventBus } from "@/api/eventBus";
import utils from "../../utils/utils.js";
export default {
    name: "bargainBuy-list",
    data() {
        return {
            pickerOptions: {
                //时间快捷选择
                shortcuts: [
                    {
                        text: "昨天",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
            pageSize: 20,
            total: 0,
            curHeight: null,
            groupBuys: [],
            pageNum: 1,
            payLoads: "",
            queryType: true,
            query: {
                date: [],
                status: "",
            },
            keyword: {
                date: [],
                status: "",
            },
        };
    },
    filters: {
        watchType(val) {
            if (val == 0) {
                return "";
            } else {
                return "砍价活动";
            }
        },
    },
    directives: { permission, loadMore },
    activated() {
        this.payLoads = new Date().getTime();
    },
    created() {
        EventBus.$on("bargainBuy-add", (res) => {
            this.groupBuys.splice(0, 0, res);
            this.loadGroupBuy();
        });
        EventBus.$on("bargainBuy-edit", (res) => {
            // 监听新增完毕
            // 更新列表数组
            for (var i = 0; i < this.groupBuys.length; i++) {
                if (this.groupBuys[i].id == res.id) {
                    this.$set(this.groupBuys, i, res);
                }
            }
        });
        this.loadGroupBuy();
    },
    mounted() {
        this.comeIn();
        this.beforeMount();
    },
    components: { Pagination },
    methods: {
        toDo(data) {
            this.$router.push({
                path: "/bargainBuy/view",
                query: { id: data.id },
            });
        },
        deleteGroupBuy(data) {
            var _this = this;
            this.$confirm("确认删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                del(data.id).then((res) => {
                    this.groupBuys.forEach(function (item, index) {
                        if (item.id === data.id) {
                            _this.groupBuys.splice(index, 1);
                        }
                    });
                });
            });
        },
        unAuditClick(data) {
            var product = {
                id: data.id,
            };
            this.$confirm("确认下架", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                unAudit(product).then((res) => {
                    this.loadGroupBuy();
                });
            });
        },
        releaseProduct(data) {
            var product = {
                id: data.id,
            };
            this.$confirm("确认上架", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                audit(product).then((res) => {
                    this.loadGroupBuy();
                });
            });
        },
        loadGroupBuy() {
            if (utils.isNull(this.keyword.date)) {
                this.keyword.date = [];
            }
            let param = new URLSearchParams();
            param.append("pageSize", this.pageSize);
            param.append("pageNum", this.pageNum);
            param.append("status", this.keyword.status);
            if (this.keyword.date.length > 0) {
                param.append("startDate", this.keyword.date[0]);
                param.append("endDate", this.keyword.date[1]);
            }

            list(param).then((res) => {
                this.groupBuys = res.data.data;
                this.total = res.data.total;
            });
        },
        editClick(data) {
            this.$router.push({
                path: "/bargainBuy/edit",
                query: { id: data.id },
            });
        },

        resetClick() {
            this.query.date = [];
            this.query.status = "";
            this.keyword = this.query;
            this.pageNum = 1;
            this.loadGroupBuy();
        },
        queryClick() {
            this.keyword = this.query;
            this.pageNum = 1;
            this.loadGroupBuy();
        },
        beforeMount() {
            var _this = this;
            window.onresize = () => {
                return (() => {
                    if (this.queryType == false) {
                        var h =
                            document.documentElement.clientHeight ||
                            document.body.clientHeight;
                        _this.curHeight = h - 266; //减去页面上固定高度height
                    } else {
                        var h =
                            document.documentElement.clientHeight ||
                            document.body.clientHeight;
                        _this.curHeight = h - 220; //减去页面上固定高度height
                    }
                })();
            };
        },
        chooseClick() {
            this.queryType = !this.queryType;
            if (this.queryType == false) {
                var h =
                    document.documentElement.clientHeight ||
                    document.body.clientHeight;
                this.curHeight = h - 266; //减去页面上固定高度height
            } else {
                var h =
                    document.documentElement.clientHeight ||
                    document.body.clientHeight;
                this.curHeight = h - 220; //减去页面上固定高度height
            }
        },
        comeIn() {
            var h =
                document.documentElement.clientHeight ||
                document.body.clientHeight;
            this.curHeight = h - 220; //减去页面上固定高度height
        },
        addClick() {
            this.$router.push({
                path: "/bargainBuy/add",
            });
        },
    },
};
</script>

<style scoped>
.app {
    background-color: rgba(248, 248, 248, 0.8);
}

/deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
}

.report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
}
.report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409eff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
}
.report_header_date {
    margin-left: 10px;
    width: 250px;
    margin-top: 5px;
}
</style>
